﻿.snackbar {
  align-items: center;
  background-color: var(--b-snackbar-background, #323232);
  color: var(--b-snackbar-text-color, rgb(255, 255, 255));
  font-size: 0.875rem;
  line-height: 1.428572;
  opacity: 0;
  padding: 0.875rem 1.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: opacity 0s var(--transition-duration-mobile-leaving, 0.195s), transform var(--transition-duration-mobile-leaving, 0.195s) cubic-bezier(0.4, 0, 1, 1);
  width: 100%;
  z-index: 60;
}
@media (min-width: 768px) {
  .snackbar {
    border-radius: 2px;
    max-width: 35.5rem;
    min-width: 18rem;
    left: 50%;
    transform: translate(-50%, 100%);
    width: auto;
  }
}
@media (min-width: 768px) {
  .snackbar {
    transition: opacity 0s var(--transition-duration-tablet-leaving, 0.2535s), transform var(--transition-duration-tablet-leaving, 0.2535s) cubic-bezier(0.4, 0, 1, 1);
  }
}
@media (min-width: 1200px) {
  .snackbar {
    transition: opacity 0s var(--transition-duration-desktop-leaving, 0.13s), transform var(--transition-duration-desktop-leaving, 0.13s) cubic-bezier(0.4, 0, 1, 1);
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  .snackbar {
    transition: none;
  }
}
.snackbar.snackbar-show {
  transition-duration: var(--transition-duration-mobile-entering, 0.225s);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 768px) {
  .snackbar.snackbar-show {
    transition-duration: var(--transition-duration-tablet-entering, 0.2925s);
  }
}
@media (min-width: 1200px) {
  .snackbar.snackbar-show {
    transition-duration: var(--transition-duration-desktop-entering, 0.15s);
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  .snackbar.snackbar-show {
    transition: none;
  }
}
@media (min-width: 768px) {
  .snackbar.snackbar-show {
    transform: translate(-50%, -1.5rem);
  }
}

.snackbar-header {
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: DARKEN(var(--b-snackbar-background, #323232), 30%);
  margin-right: auto;
  min-width: 0;
  font-weight: bold;
  padding-bottom: 0.875rem;
}

.snackbar-footer {
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: DARKEN(var(--b-snackbar-background, #323232), 30%);
  margin-right: auto;
  min-width: 0;
  padding-top: 0.875rem;
}

.snackbar-body {
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
  max-height: 100%;
  min-width: 0;
}

.snackbar-action-button {
  transition-duration: var(--transition-duration-mobile, 0.3s);
  transition-property: background-color, background-image;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  background-color: transparent;
  background-image: none;
  border: 0;
  color: var(--b-snackbar-button-color, var(--b-snackbar-button-color, #ff4081));
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  /*margin-left: $snackbar-inner-spacer-x;*/
  padding: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .snackbar-action-button {
    transition-duration: var(--transition-duration-tablet, 0.39s);
  }
}
@media (min-width: 1200px) {
  .snackbar-action-button {
    transition-duration: var(--transition-duration-desktop, 0.2s);
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  .snackbar-action-button {
    transition: none;
  }
}
.snackbar-action-button:focus, .snackbar-action-button:hover {
  color: var(--b-snackbar-button-hover-color, var(--b-snackbar-button-hover-color, #ff80ab));
  text-decoration: none;
}
@media (min-width: 768px) {
  .snackbar-action-button {
    margin-left: 3rem;
  }
}
.snackbar-action-button:focus {
  outline: 0;
}

@media (min-width: 768px) {
  .snackbar-bottom-start,
  .snackbar-bottom-end {
    transform: translateY(100%);
  }
  .snackbar-bottom-start.snackbar-show,
  .snackbar-bottom-end.snackbar-show {
    transform: translateY(-1.5rem);
  }
}

@media (min-width: 768px) {
  .snackbar-bottom-start {
    left: 1.5rem;
  }
}

@media (min-width: 768px) {
  .snackbar-bottom-end {
    right: 1.5rem;
    left: auto;
  }
}

.snackbar-top {
  top: 0;
  bottom: auto;
  transform: translateY(-100%);
}
@media (min-width: 768px) {
  .snackbar-top {
    transform: translateX(-50%) translateY(-100%);
  }
  .snackbar-top.snackbar-show {
    transform: translate(-50%, 1.5rem);
  }
}
.snackbar-top-start {
  top: 0;
  bottom: auto;
  transform: translateY(-100%);
  left: 0;
}
@media (min-width: 768px) {
  .snackbar-top-start {
    transform: translateY(-100%);
    left: 1.5rem;
  }
  .snackbar-top-start.snackbar-show {
    transform: translateY(1.5rem);
  }
}
.snackbar-top-end {
  top: 0;
  bottom: auto;
  transform: translateY(-100%);
}
@media (min-width: 768px) {
  .snackbar-top-end {
    transform: translateY(-100%);
    right: 1.5rem;
    left: auto;
  }
  .snackbar-top-end.snackbar-show {
    transform: translateY(1.5rem);
  }
}

.snackbar-multi-line {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.snackbar-multi-line .snackbar-body {
  white-space: normal;
}

.snackbar-primary {
  background-color: var(--b-snackbar-background-primary, #cce5ff);
  color: var(--b-snackbar-text-primary, #004085);
}

.snackbar-action-button-primary {
  color: var(--b-snackbar-button-primary, #ff4081);
}
.snackbar-action-button-primary:focus, .snackbar-action-button-primary:hover {
  color: var(--b-snackbar-button-hover-primary, #ff80ab);
}

.snackbar-secondary {
  background-color: var(--b-snackbar-background-secondary, #e2e3e5);
  color: var(--b-snackbar-text-secondary, #383d41);
}

.snackbar-action-button-secondary {
  color: var(--b-snackbar-button-secondary, #ff4081);
}
.snackbar-action-button-secondary:focus, .snackbar-action-button-secondary:hover {
  color: var(--b-snackbar-button-hover-secondary, #ff80ab);
}

.snackbar-success {
  background-color: var(--b-snackbar-background-success, #d4edda);
  color: var(--b-snackbar-text-success, #155724);
}

.snackbar-action-button-success {
  color: var(--b-snackbar-button-success, #ff4081);
}
.snackbar-action-button-success:focus, .snackbar-action-button-success:hover {
  color: var(--b-snackbar-button-hover-success, #ff80ab);
}

.snackbar-danger {
  background-color: var(--b-snackbar-background-danger, #f8d7da);
  color: var(--b-snackbar-text-danger, #721c24);
}

.snackbar-action-button-danger {
  color: var(--b-snackbar-button-danger, #ff4081);
}
.snackbar-action-button-danger:focus, .snackbar-action-button-danger:hover {
  color: var(--b-snackbar-button-hover-danger, #ff80ab);
}

.snackbar-warning {
  background-color: var(--b-snackbar-background-warning, #fff3cd);
  color: var(--b-snackbar-text-warning, #856404);
}

.snackbar-action-button-warning {
  color: var(--b-snackbar-button-warning, #ff4081);
}
.snackbar-action-button-warning:focus, .snackbar-action-button-warning:hover {
  color: var(--b-snackbar-button-hover-warning, #ff80ab);
}

.snackbar-info {
  background-color: var(--b-snackbar-background-info, #d1ecf1);
  color: var(--b-snackbar-text-info, #0c5460);
}

.snackbar-action-button-info {
  color: var(--b-snackbar-button-info, #ff4081);
}
.snackbar-action-button-info:focus, .snackbar-action-button-info:hover {
  color: var(--b-snackbar-button-hover-info, #ff80ab);
}

.snackbar-light {
  background-color: var(--b-snackbar-background-light, #fefefe);
  color: var(--b-snackbar-text-light, #818182);
}

.snackbar-action-button-light {
  color: var(--b-snackbar-button-light, #ff4081);
}
.snackbar-action-button-light:focus, .snackbar-action-button-light:hover {
  color: var(--b-snackbar-button-hover-light, #ff80ab);
}

.snackbar-dark {
  background-color: var(--b-snackbar-background-dark, #d6d8d9);
  color: var(--b-snackbar-text-dark, #1b1e21);
}

.snackbar-action-button-dark {
  color: var(--b-snackbar-button-dark, #ff4081);
}
.snackbar-action-button-dark:focus, .snackbar-action-button-dark:hover {
  color: var(--b-snackbar-button-hover-dark, #ff80ab);
}

.snackbar-stack-bottom-end,
.snackbar-stack-bottom-start,
.snackbar-stack-bottom {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 1090 !important;
  bottom: 0;
}

.snackbar-stack-bottom-end .snackbar,
.snackbar-stack-bottom-start .snackbar,
.snackbar-stack-bottom .snackbar {
  position: relative;
  flex-direction: row;
  margin-bottom: 0;
}
.snackbar-stack-bottom-end .snackbar:not(:last-child),
.snackbar-stack-bottom-start .snackbar:not(:last-child),
.snackbar-stack-bottom .snackbar:not(:last-child) {
  margin-bottom: 1.5rem;
}

.snackbar-stack-top-end,
.snackbar-stack-top-start,
.snackbar-stack-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: fixed;
  z-index: 1090 !important;
  top: 0;
}
.snackbar-stack-top-end .snackbar,
.snackbar-stack-top-start .snackbar,
.snackbar-stack-top .snackbar {
  position: relative;
  flex-direction: row;
  margin-bottom: 0;
}
.snackbar-stack-top-end .snackbar:not(:last-child),
.snackbar-stack-top-start .snackbar:not(:last-child),
.snackbar-stack-top .snackbar:not(:last-child) {
  margin-bottom: 1.5rem;
}

.snackbar-stack-top .snackbar.snackbar-show,
.snackbar-stack-top-start .snackbar.snackbar-show,
.snackbar-stack-top-end .snackbar.snackbar-show {
  transition: all var(--stack-transition-duration, 1000);
  animation: showTop var(--stack-animation-duration, 500) forwards;
}

.snackbar-stack-top .snackbar-hide,
.snackbar-stack-top-start .snackbar-hide,
.snackbar-stack-top-end .snackbar-hide {
  transition: all var(--stack-transition-duration, 1000);
  animation: hideTop var(--stack-animation-duration, 500) backwards;
}

.snackbar-stack-bottom .snackbar.snackbar-show,
.snackbar-stack-bottom-start .snackbar.snackbar-show,
.snackbar-stack-bottom-end .snackbar.snackbar-show {
  transition: all var(--stack-transition-duration, 1000);
  animation: showBottom var(--stack-animation-duration, 500) forwards;
}

.snackbar-stack-bottom .snackbar-hide,
.snackbar-stack-bottom-start .snackbar-hide,
.snackbar-stack-bottom-end .snackbar-hide {
  transition: all var(--stack-transition-duration, 1000);
  animation: hideBottom var(--stack-animation-duration, 500) backwards;
}

@keyframes showTop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hideTop {
  0% {
    opacity: 1;
    top: 0;
  }
  100% {
    opacity: 0;
    top: -100px;
  }
}
@keyframes showBottom {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hideBottom {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (min-width: 576px) {
  .snackbar-stack-bottom {
    left: 50%;
    transform: translate(-50%, 0%);
  }
  .snackbar-stack-bottom-start {
    left: 1.5rem;
  }
  .snackbar-stack-bottom-end {
    right: 1.5rem;
  }
  .snackbar-stack-top-start {
    left: 1.5rem;
    top: 1.5rem;
  }
  .snackbar-stack-top-end {
    right: 1.5rem;
    top: 1.5rem;
  }
  .snackbar-stack-top {
    left: 50%;
    transform: translate(-50%, 0%);
    top: 1.5rem;
  }
}
@media (max-width: 576px) {
  .snackbar-stack {
    right: 0;
    left: 0;
  }
}
